<template>
    <el-container>
        <el-header>
            <div></div>
            <div class="right-panel-search">
                <el-date-picker v-model="search.year" :value-format="'YYYY'" type="year" placeholder="请选择年" />
                <!-- <el-select v-model="search.customer_id" filterable clearable placeholder="请选择客户">
                    <el-option v-for="item in clientList" :key="item.id" :label="item.customer_name" :value="item.id"/>
                </el-select> -->
                <!-- <el-input v-model="search.customer_name" placeholder="客户名称" clearable @keyup.enter="upsearch"></el-input> -->
                <sc-table-select v-model="customer_boj" filterable :apiObj="clientObj" :table-width="800" :props="props" @change="clientChange"
                     border placeholder="请选择客户">
                        <el-table-column prop="id" label="ID" width="60"></el-table-column>
                        <el-table-column label="客户编号" prop="customer_code" align="center"></el-table-column>
                        <el-table-column label="客户名称" prop="customer_name" align="center"></el-table-column>
                        <el-table-column label="客户助记码" prop="help_remember" align="center"></el-table-column>
                        <el-table-column label="来源" prop="sourcetxt.source_name" align="center"></el-table-column>
                        <el-table-column label="联系人" prop="contacts" align="center"></el-table-column>
                        <el-table-column label="联系人手机" prop="mobile" align="center"></el-table-column>
                        <el-table-column label="地址" prop="address" align="center"></el-table-column>
                        <el-table-column label="应收欠款" prop="only_money" align="center"></el-table-column>
                        <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                        <el-table-column label="业务员" prop="salesman_name" align="center"></el-table-column>
                    </sc-table-select>
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="refresh">重置</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <el-card shadow="never" class="data_card_mid_right">
                <div style="display:flex;width:100%">
                    <div class="flex" style="width:30%">
                        <div class="left">
                            <div class="flex">
                                <el-icon size="24"><el-icon-Memo /></el-icon>
                                <span>合同数量</span>
                            </div>
                            <div style="text-align:center;margin:30px 0">{{detail.total}}</div>
                        </div>
                        <div class="right">
                            <div class="list">
                                <div class="flex">
                                    <div class="flex">
                                        <el-icon><el-icon-Money /></el-icon>
                                        <span>合同金额</span>
                                    </div>
                                    <div class="money">¥{{detail.sales_money}}</div>
                                </div>
                            </div>
                            <div class="list" style="background: #f7c049">
                                <div class="flex">
                                    <div class="flex">
                                        <el-icon><el-icon-Money /></el-icon>
                                        <span>已收金额</span>
                                    </div>
                                    <div class="money">¥{{detail.pay_price}}</div>
                                </div>
                            </div>
                            <div class="list" style="background: #f19c63">
                                <div class="flex">
                                    <div class="flex">
                                        <el-icon><el-icon-Money /></el-icon>
                                        <span>未收金额</span>
                                    </div>
                                    <div class="money">¥{{detail.remain_money}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width:25%">
                        <scEcharts height="200px" :option="options"></scEcharts>
                    </div>
                    <div style="width:35%">
                        <scEcharts height="200px" :option="option"></scEcharts>
                    </div>
                </div>
            </el-card>
            <scTable ref="table" :apiObj="apiObj" stripe border @setExtend="setExtend" class="scTable">
                <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
                <el-table-column label="收款日期" prop="open_single" align="center"></el-table-column>
                <el-table-column label="客户名称" prop="customer_name" align="center"></el-table-column>
                <el-table-column label="合同金额" prop="total_amount" align="center"></el-table-column>
                <el-table-column label="已收金额" prop="pay_price" align="center"></el-table-column>
                <el-table-column label="未收金额" prop="remain_money" align="center"></el-table-column>
                <el-table-column label="欠款状态" prop="pay_status" align="center"></el-table-column>
                <el-table-column label="合同状态" prop="contract_status_text" align="center"></el-table-column>
                <el-table-column label="发票号" prop="invoice_code" align="center"></el-table-column>
                <el-table-column label="开票日期" prop="invoice_date" align="center"></el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
            </scTable>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                apiObj:this.$API.finance.saledevice,
                groupId:"0",
                option : {
                    title: {
                        text: '月度合同金额明细'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['合同金额', '已收金额', '未收金额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                        saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '合同金额',
                            type: 'line',
                            data: []
                        },
                        {
                            name: '已收金额',
                            type: 'line',
                            data: []
                        },
                        {
                            name: '未收金额',
                            type: 'line',
                            data: []
                        },
                    ]
                },
                options : {
                    title: {
                    // text: 'Referer of a Website',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: [],
                        label: {
                            show: true,
                            position: 'outside', // 设置数据和百分比显示在外部
                            formatter: '{b}: {c} ({d}%)' // 显示格式，{b}是数据名，{c}是数据值，{d}是百分比
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#f7c049','#6cd8a2'
                                    ];
                                    return colorList[params.dataIndex % colorList.length];
                                }
                            }
                        }
                    }
                ]
                },
                search:{
                    year: this.moment().format('YYYY')
                },
                detail:{
                    total: 0,
                    sales_money: 0,
                    pay_price: 0,
                    remain_money: 0,
                },
                clientObj: this.$API.client.client.list,
                customer_boj: "",
                props: {
                    label: 'customer_name',
                    value: 'id',
                    keyword: "keyword"
                },
            }
        },
        mounted () {
        },
        methods: {
            setExtend(data){
                this.detail = data
                this.option.xAxis.data = data.month
                let a = []
                let b = []
                let c = []
                data.month_data.map(item=>{
                    a.push(Number(item.total_money).toFixed(2))
                    b.push(Number(item.pay_price).toFixed(2))
                    c.push(Number(item.remain_money).toFixed(2))
                })
                this.option.series[0].data = a
                this.option.series[1].data = b
                this.option.series[2].data = c
                // let process = (Number(data.pay_price) / Number(data.sales_money)) * 100
                // this.options.series[0].data[0].value = (process).toFixed(2)
                let array = [
                    {value: Number(data.pay_price), name: '已收金额'},
                    {value: Number(data.remain_money), name: '未收金额'}
                ]
                this.options.series[0].data = array
            },
            upsearch() {
                this.$refs.table.upData(this.search)
            },
            refresh() {
                for (const key in this.search) {
                    this.search[key] = null;
                }
                this.customer_boj = ""
                this.$refs.table.upData(this.search)
            },
            clientChange(e){
                this.search.customer_name = e.customer_name
            },
        },
    }
</script>

<style lang="scss" scoped>
.flex{
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-size: 18px;
    .left{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: #9da6ff;
        padding: 20px;
        line-height: 45px;
    }
    .right{
        .list{
            margin: 5px;
            background: #6cd8a2;
            padding: 10px;
            line-height: 40px;
            width: 100%;
            .money{
                padding: 0 50px;
            }
        }
    }
}
.scTable{
    height: calc(100vh - 388px) !important;
}
</style>
